<template>
  <view class="listItem">
    <view class="firstRow">
      <view class="left">
        <text class="stockName">{{info.name}}</text>
        <text class="stockCode">{{info.code}}</text>
      </view>
      <view class="right">
        <text class="text">双低</text>
        <text class="num">{{info.dblow}}</text>
      </view>
    </view>
    
    <view class="secendRow">
      <view class="left">
        <text class="text">转股价值</text>
        <text class="num">{{info.convert_value}}</text>
      </view>
      <view class="right">
        <text class="text">溢价率</text>
        <text class="num">{{info.premium_rt}}</text>
      </view>
    </view>
    
    <view class="thirdRow">
      <view class="left">
        <text>单价</text>
        <input style="width: 100rpx;" class="input" type="text" v-model="info.price" @input="handleInfoChange" />
      </view>
      <view class="right">
        <text>数量</text>
        <input style="width: 50rpx;" class="input" type="text" v-model="info.num" @input="handleInfoChange"/>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    props: {
      info: {
        type: Object
      },
      index: {
        type: Number
      }
    },
    methods: {
      handleInfoChange() {
        this.$emit('haschange', this.info, this.index)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .listItem {
    margin: 30rpx auto;
    padding: 30rpx;
    box-shadow: 0 0 10rpx #333;
    border-radius: 10rpx;
  }
  .input {
    border-bottom: 2rpx solid #000;
  }
  .text {
    margin-right: 10rpx;
    font-size: 30rpx;
    color: gray;
  }
  .num {
    font-size: 30rpx;
    color: red;
  }
  .firstRow, .secendRow, .thirdRow {
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
  }
  .firstRow {
    margin-top: 0rpx;
    .left {
      .stockName {
        font-weight: 700;
      }
      .stockCode {
        margin-left: 10rpx;
        font-size: 30rpx;
        color: gray;
      }
    }
  }

</style>
